<template>
  <div class="left-nav">
    <ul>
      <li class="border-bottom">
        <i class="icon iconfont">&#xe606;</i>
        <div>收银</div>
      </li>
      <li class="border-bottom">
        <i class="icon iconfont">&#xe603;</i>
        <div>店铺</div>
      </li>
      <li class="border-bottom">
        <i class="icon iconfont">&#xe600;</i>
        <div>商品</div>
      </li>
      <li class="border-bottom">
        <i class="icon iconfont">&#xe604;</i>
        <div>会员</div>
      </li>    
      <li class="border-bottom">
        <i class="icon iconfont">&#xe602;</i>
        <div>统计</div>
      </li>    
      <li class="border-bottom">
        <i class="icon iconfont">&#xe605;</i>
        <div>设置</div>
      </li>                         
    </ul>
  </div>
</template>

<script>
export default {
  name: 'leftNav'
}
</script>

<style lang="stylus">
  .left-nav >>> .border-bottom
    &:befor
      border-color: #fff
    &:after
      border-color: #fff
  .left-nav
    color: #fff
    font-size: 16px
    height: 100%
    background-color: #1D8CE0
    float: left
    width: 5%
    text-align: center
    .iconfont
      font-size: 24px
    li
      padding: 30px 10px
</style>

